<template>
    <view class="pub_page pub_page_bg pub_agentStore pub_header_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <z-paging ref="Zpaging" class="pub_page_scroll page_box" v-model="logList" @query="getLogList" :refresher-enabled="false" :fixed="false" :hide-empty-view="true">
            <img v-if="isMock" class="mock_img" :src="canvasUrl" />
            <div class="qrcode">
                <pub-image class="qrcode_img" :src="canvasUrl"></pub-image>
                <div class="pub_nodata_2">请扫描二维码</div>
                <div class="pub_btn" @click="beginCanvas">保存二维码</div>
            </div>
            <br>
            <div class="num_div" @click="jumpPage({url:'/pages/mine/log',data:{openType:4}})">
                <div class="txt">营业额</div>
                <div class="num">{{userInfo.turnover || 0}}</div>
                <div class="btns">
                    <div class="btn btn_1" @click.stop="jumpPage({url:'/pages/mine/withdrawal',data:{openType:1}})">提现</div>
                    <div class="btn" @click.stop="jumpPage({ url: '/pages/agentStore/send', data: {  giveType: 3 } })">
                        赠送
                    </div>
                </div>
            </div>
            <div class="zt_lis_div">
                <div class="title">线下购物</div>
                <div class="tr th">
                    <div class="td">用户信息</div>
                    <div class="td td_center">金额</div>
                    <div class="td td_center">时间</div>
                </div>
                <div class="pub_nodata_1" v-if="logList.length==0">空空如也~~</div>
                <div class="tr" v-for="(li, key) in logList" :key="key">
                    <div class="td td_nickname">{{ li.nickName }} <br> <span>{{ li.mobile }}</span></div>
                    <div class="td td_center">+{{ li.num }}</div>
                    <div class="td td_center td_small">{{ li.createTime }}</div>
                </div>
            </div>
        </z-paging>

        <mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="mosoweData[mosoweKeyNew].lists" :height="mosoweData[mosoweKeyNew].height" :width="mosoweData[mosoweKeyNew].width" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '代理门店',//标题栏内容
                left_type: 3,
                header_color: 'rgba(0,0,0,0)',
            },

            canvasUrl: '',
            mosoweKey: 0,
            isMock: false,

            logList: []
        };
    },
    computed: {
        mosoweKeyNew() {
            return this.isMock ? 1 : this.mosoweKey
        },
        mosoweData() {
            return [{
                lists: [
                    {
                        type: 'qr',
                        content: `AGENT_${this.userInfo.mobile}`,
                        x: 0,
                        y: 0,
                        width: 600,
                        height: 600,
                    },
                ],
                width: 600,
                height: 600,
            }, {
                lists: [
                    {
                        type: 'image',
                        content: '../../static/bimg/img_40.jpg',
                        width: 1125,
                        height: 1125,
                        x: 0,
                        y: 0,
                    },
                    {
                        type: 'qr',
                        content: `AGENT_${this.userInfo.mobile}`,
                        x: 260,
                        y: 200,
                        width: 605,
                        height: 605,
                    },
                    {
                        type: 'text',
                        content: '利商网 线下购物',
                        x: 550,
                        y: 1030,
                        color: '#000',
                        size: 46,
                        align: 'center'
                    },
                ],
                width: 1125,
                height: 1125,
            }]
        }
    },
    onLoad() {
        this.getUserInfo({
            callback: () => {
                setTimeout(() => {
                    this.$refs.mosoweCanvasComponents.createCanvas();
                }, 500);
            }
        })

        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    methods: {
        beginCanvas() {
            // #ifndef APP-PLUS
            this.$comFun.toast('请使用 利商网 APP');
            // #endif
            // #ifdef APP-PLUS
            this.mosoweKey = 1;
            setTimeout(() => {
                this.$refs.mosoweCanvasComponents.createCanvas();
            }, 500);
            // #endif
        },
        _canvasImage(e) {
            // console.log(e);
            if (this.mosoweKey == 0) {
                this.canvasUrl = e;
            } else {
                if (this.isMock) {
                    this.canvasUrl = e;
                    return;
                }
                const that = this;
                uni.showModal({
                    title: '权限申请',
                    content: '用于图片保存，需要申请相机和相册的权限',
                    success: function (res) {
                        if (res.confirm) {
                            // #ifdef APP-PLUS
                            uni.saveImageToPhotosAlbum({
                                filePath: e,
                                success: function () {
                                    console.log('save success');
                                    that.$comFun.toast('保存成功');
                                },
                                fail: function () {
                                    console.log('save error');
                                    that.$comFun.toast('保存失败，请稍后再试');
                                },
                            });
                            // #endif
                        }
                    }
                });
            }
        },
        async getLogList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: pageSize,
            };
            const res = await this.$request.get('user/getTurnoverOfflineLog', data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        }
    },
};
</script>
<style>
.mock_img {
    width: 100vw;
}
</style>
<style lang="scss" scoped>
.pub_agentStore {
    .qrcode {
        width: 70vw;
        height: auto;
        padding: 10vw 0 5vw 0;
        margin: 10vw auto;
        border-radius: 15px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        box-shadow: 0 0 30px 10px rgba($color: #000000, $alpha: 0.1);

        .qrcode_img {
            width: 50vw;
            height: 50vw;
            margin: 0 0 20rpx 0;
        }

        .pub_btn {
            width: 80%;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 28rpx;
            margin: 30rpx 0 0 0;
        }
    }

    .num_div {
        width: calc(100% - 30px);
        margin: 0 auto;
        border-radius: 15px;
        background: url("@/static/bimg/img_2.png") center no-repeat;
        background-size: cover;
        padding: 30rpx 340rpx 30rpx 30rpx;
        position: relative;

        .txt {
            line-height: 32rpx;
            color: rgba(255, 255, 255, 0.8);
            font-size: 24rpx;
            display: flex;
            margin-bottom: 4rpx;
        }

        .num {
            line-height: 70rpx;
            color: #ffffff;
            font-size: 48rpx;
            font-weight: bold;
            word-break: break-all;
        }

        .btns {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -25rpx;
            display: flex;

            .btn {
                width: 136rpx;
                height: 50rpx;
                line-height: 46rpx;
                text-align: center;
                color: #fff;
                font-size: 24rpx;
                border: 2rpx solid #fff;
                border-radius: 25rpx;
                margin: 0 28rpx 0 0;
            }

            .btn_1 {
                background-color: #fff;
                color: #ff0a0d;
            }
        }
    }

    .zt_lis_div {
        width: calc(100% - 60rpx);
        margin: 30rpx auto;
        border-radius: 24rpx;
        background-color: #fafafa;
        padding: 0 22rpx 20rpx 20rpx;

        .title {
            height: 100rpx;
            line-height: 100rpx;
            color: #111827;
            font-size: 28rpx;
            font-weight: 500;
        }

        .tr {
            width: 100%;
            display: flex;
            border-top: 2rpx solid #eeeff2;
            padding: 14rpx 0;
            align-items: center;

            .td {
                width: 33%;
                color: #718096;
                font-size: 26rpx;
                line-height: 40rpx;

                span {
                    font-size: 20rpx;
                    line-height: 30rpx;
                }
            }

            .td_center {
                text-align: center;
            }

            .td_small {
                font-size: 22rpx;
            }

            .td_nickname {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .th {
            padding: 26rpx 0;

            .td {
                color: #3d3d3d;
                font-weight: 500;
            }
        }
    }
}
</style>
